<template>
  <div>
    <!-- 
      在浏览器上获取点 水平坐标 垂直坐标
      event event的数据类型 mouseEvent
      pageX
      pageY
     -->
     <h1>x的坐标{{x}}</h1>
     <h1>y的坐标{{y}}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref,onUnmounted } from 'vue'

export default defineComponent({
  setup () {
    const x=ref(0)
    const y=ref(0)

    // 绑定的事件对应的回调函数
    const updatePosition=(e:MouseEvent)=>{
      x.value=e.pageX
      y.value=e.pageY
    }

    // 点击界面获取x y的坐标
    // 浏览器界面 document document上绑定事件 DOM
    // 什么时候能操作DOM setup是在beforeCreate之前创建的直接操作不可以
    // 在mounted时是最早可以操作DOM元素的时刻 vue3当中的mounted onMounted
    onMounted(()=>{
      // 在此时是最早能操作DOM的时刻
      document.addEventListener('click',updatePosition)
    })

    // 离开取消事件
    onUnmounted(()=>{
      // 离开取消addEventListener绑定的事件
      document.removeEventListener('click',updatePosition)
    })

    // 自定义hook
    // hook的作用就是将具有特定功能的一段代码封装起来 什么时候用 什么时候调用 模块的复用功能
    return {
      x,
      y,
    }
  }
})
</script>

<style scoped>

</style>